<template>
	<view class="custom-navbar">
		<view class="navbar gradient-background">
			<view class="status-bar" :style="{height:SYSTEM_INFO.statusBarHeight+'px'}"></view>
			<view class="title-bar">
				<view class="title">{{title}}</view>
				<view class="search">
					<uni-icons type="search" color="#888"></uni-icons>
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="fill" style="`{height: ${SYSTEM_INFO.statusBarHeight}+${titleBarHeight}+'px' ;}`"></view>
	</view>
</template>

<script setup>
	const SYSTEM_INFO=uni.getSystemInfoSync();
	// console.log(SYSTEM_INFO.statusBarHeight);
	let titleBarHeight="50";
	defineProps({
		title:{
			type:String,
			default:"Title"
		}
	})
</script>

<style lang="scss"scoped>
	@import url("../../common/style/my_style.scss");
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 160rpx !important;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
	.fill{
		width: 100%;
	}
	.status-bar{
		height: 60rpx;
		width: 100%;
	}
	.title-bar{
		height: 100rpx;
		width: 680rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.title{
			font-size: 45rpx;
			font-weight: bold;
			margin-right: 25rpx;
		}
		.search{
			width: 220rpx;
			height: 50rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			background-color: #ffffff88;
			border: 4rpx solid white;
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: 25rpx;
			color: $uni-text-color-grey;
			padding: 0 25rpx;
		}
	}
	}
</style>